<template>
	<view class="page">
		<navigation textColor="#333333" barColor="#333333" :defaultButton="defaultButton">信息采集</navigation>
		<view class="hang"><text>用户名：</text><input type="text" v-model="model.username" placeholder="请输入:"></view>
		<view class="hang"><text>证件号码：</text><input type="text" @change="queryage()" v-model="model.idCard" placeholder="请输入正确证件号:"></view>
		<view class="hang"><text>年龄：</text><input type="number" disabled="true" v-model="model.age" placeholder="--"></view>
		<view class="hang hangsex"><text>性别：</text>
			<view class="sex">
				<view class="sex1" @click="changesex(1)" :class="{seleced:model.sex==1}">
					男
				</view>
				<view class="sex1" @click="changesex(2)" :class="{seleced:model.sex==2}">
					女
				</view>
			</view>
		</view>
			<form-input  type="number" name="联系电话" v-model="model.phone" placeholder="请输入您的联系方式"></form-input>
			<view class="pickerBox">
				<view class="picker">
					请选择您所在的乡镇
				</view>
				<picker mode="multiSelector" @change="bindchange" @columnchange="columnchange" :range="timeList" range-key="communityName">
					<view class="picker-item">{{title}}</view>
				</picker>
			</view>
			
			
			<!-- <form-picker
				name="归属社区"
				v-model="model.communityId"
				placeholder="请选择您所在的镇"
				rangeKey="communityName"
				rangeValue="communityId"
				:range="communityAllList"
				:bindchange="getcom()"
			></form-picker> 
			<form-picker
				name="归属村"
				v-model="model.communityId"
				placeholder="请选择您所在的社区"
				rangeKey="communityName"
				rangeValue="communityId"
				:range="com"
			></form-picker> -->
			<form-input name="现居住地" v-model="model.juzhudi" placeholder="请输入您的现居住地"></form-input>
			<view class="form-item">
				上传图片识别以上部分信息：
			</view>
			<view class="readimg">
				<image class="readImg" src="../../../static/images/certification01.png" mode=""  @click="picCorpZup"></image>
			</view>
			<button class="page_btn" hover-class="page_btn-hover" @tap="submit">确认提交</button>
			<view class="org" v-if="init" @tap="goSelect">我是服务商</view>
		</view>
	</view>
</template>

<script>
import { HTTP_SERVER_URL } from '@/config';
import * as commonApi from '@/api/common.js';
import * as modelApi from '@/api/userApi/model.js';
import * as userApi from '@/api/userApi/user.js';
export default {
	data() {
		return {
			town:[],
			title:'请选择',
			comAll:[],
			timeList: [{},{}],
			childArr:[],//二级分类数据源
			timesIndex: [0,0],
			userInfo: this.$store.getters.getUserInfo,
			init: false,
			defaultButton: 'back',
			model: {
				idCard:0
			},
			sexList: [
				{
					isActive: true,
					label: '男'
				},
				{
					isActive: false,
					label: '女'
				}
			],
			communityAllList: [],
			com:[]
		};
	},
	onBackPress() {
		if (this.defaultButton != 'back') {
			return true;
		}
	},
	created() {
		this.getcom()
	},
	onShow() {
		// this.getCommunityAllList();
		let model = JSON.parse(JSON.stringify(this.model));
		this.model.openId = this.userInfo.openId || '';
		this.model.phone = this.userInfo.phone || '';
		this.model.wxAvatar = this.userInfo.wxAvatar || '';
		this.model.wxNickname = this.userInfo.wxNickname || '';
		this.getModel();
		
	},
	methods: {
		changesex(e) {
			console.log(e)
			this.model.sex = e
			console.log(this.model.sex)
		},
		picCorpZup() {
			uni.chooseImage({
				count: 1,
				success: res => {
					uni.uploadFile({
						url: HTTP_SERVER_URL + "/admin/ocr",
						filePath: res.tempFilePaths[0],
						name: "pic",
						formData: {
							'user': 'test'
						},
						success: (uploadFileRes) => {						
							console.log(uploadFileRes.data)
							var obj = JSON.parse(uploadFileRes.data)
							console.log(obj)
							// this.model.= uploadFileRes.data.data
							 this.model.username = obj.data.name
							 this.model.idCard = obj.data.idCard
						this.queryage()
							 
						},
						fail: (err) => {
							console.log(err)
						}
					})
				}
			})
		},
		getcom(){
			uni.request({
					url:HTTP_SERVER_URL+'/sys/community/getCommunity',
					data:1,
					method:"GET",
					success:(res)=>{
						console.log('新',res)
						this.comAll=res.data.data;
						this.town=[];
						this.timeList[0]=this.comAll
						this.$set(this.timeList,1,this.comAll[0].list)
						
						
						
					}
				})
		},
		bindchange(e){
			console.log('picker发送选择改变，携带值为', e.target.value)
			let a=e.target.value
			let b=e.target.value[1]
			console.log('aaaaaaaa',b)
			
			this.title=''+this.timeList[0][a[0]].communityName+this.timeList[1][a[1]].communityName
			this.model.communityId=this.timeList[1][b].communityId
			console.log(this.model.communityId)
		},
		columnchange(e){
			console.log('右侧切换',e.detail)
			this.a=e.detail.value
			if(e.detail.column==0){
				this.$set(this.timeList,1,this.comAll[this.a].list)
				// this.timeList[1]=this.comAll[e.detail[a].list]
			}
		},
		goSelect() {
			uni.navigateTo({
				url: `/pages/orgPage/index/facilitatorSelect/facilitatorSelect`
			});
		},
		submit() {
			this.$store.state.idCard=this.model.idCard
			if(this.init) {
				userApi
					.newUser(this.model)
					.then(res => {
						if (res.code === 0) {
							uni.showToast({
								title:res.message,
								icon:'none',
								duration:2000
							})
							uni.showToast({
								mask:true,
								title: '提交成功',
								duration: 2000
							});
							if (res.data && res.data.jwt) {
								let userinfo = res.data;
								this.$store.dispatch('wechatLogin', userinfo).then(res => {})
								setTimeout(() => {
									uni.switchTab({
										url: '../helpallowance/helpallowance'
									});
								}, 2100);
							} else {
								setTimeout(() => {
									uni.reLaunch({
										url: '/pages/index/index'
									});
								}, 2100);
							}
						}
					})
					.catch(e => {
						uni.showToast({
							title: e.message,
							icon: 'none',
							duration: 1000
						});
					});
			} else {
				modelApi
					.updateMessage(this.model)
					.then(res => {
						if (res.code === 0) {
							uni.showToast({
								title:res.message,
								icon:'none',
								duration:2000
							})
							
							uni.navigateTo({
								url:'../helpallowance/helpallowance'
							})
						}
					})
					.catch(e => {
						uni.showToast({
							title: e.message,
							icon: 'none',
							duration: 1000
						});
					});
			}
		
				uni.navigateTo({
					url:'../helpallowance/helpallowance',
					
				})
			
		},
		statusChange(index, sex) {
			this.sexList.map(item => {
				item.isActive = false;
			});
			this.$set(this.sexList[index], 'isActive', true);
			this.model.sex = this.$enums['男女'][sex];
		},
		queryage() {
			uni.$emit("idCard",this.model.idCard)
			//得到年龄
			if (this.model.idCard && this.model.idCard.length == 18) {
				this.model.brthday = this.model.idCard.substring(6, 10) + '-' + this.model.idCard.substring(10, 12) + '-' + this.model.idCard.substring(12, 14);
				let age = this.getAge();
				this.$set(this.model,'age',age);
			} else {
				this.model.age = '';
			}
		},
		// 判断用户的年龄
		getAge() {
			let birthdays = new Date(this.model.brthday.replace(/-/g, '/'));
			let d = new Date();
			let age =
				d.getFullYear() -
				birthdays.getFullYear() -
				(d.getMonth() < birthdays.getMonth() || (d.getMonth() == birthdays.getMonth() && d.getDate() < birthdays.getDate()) ? 1 : 0);
			return age;
		},
		getModel() {
			if(!this.init) {
				let index = 0; 
				let sexText = '男'; 
				let userInfo = this.$store.getters.getUserInfo;
				if(userInfo.username=='yao用户'){
					userInfo.username=''
				}
				this.$set(this,'model',userInfo);
				this.queryage();
				if(userInfo.sex == this.$enums['男女']['男']) {
					index = 0;
					sexText = '男';
				} else {
					index = 1
					sexText = '女';
				}
				this.statusChange(index, sexText);
			}
		},
		getCommunityAllList() {
			commonApi 
				.getCommunityAllList()
				.then(res => {
					if (res.code === 0) {
						this.timeList[0]=res.data.slice(0,5);
						
						this.communityAllList = res.data.slice(0,5);
						console.log('请求回来',this.timeList)
						
					}
				})
				.catch(e => {
					uni.showToast({
						title: e.msg,
						icon: 'none',
						duration: 1000
					});
				});
		}
	},
	watch: {
		// model: {
		// 	handler(newName, oldName) {
		// 		this.queryage();
		// 	},
		// 	deep: true,
		// 	immediate: true
		// }
	},
	onLoad(options) {
		if (options && options.init) {
			this.defaultButton = '';
			this.init = options.init;
		}
	}
};
</script>

<style lang="stylus">
.readimg
	margin-top 50rpx
	width 690rpx
	height 350rpx
	// background url(../../../static/images/certification01.png)
	background-size 100%
	
	.text
		height 100rpx
		
.readImg
	width 100%
	height 342rpx
	margin  0 auto
	
.pickerBox
	margin 20rpx auto 20rpx
	width 100%
	display flex
	justify-content space-between
	line-height 70rpx
	.picker
		font-size 28rpx
		color #333
		font-family PingFang SC;
		font-weight 400;
	.picker-item
		font-size 24rpx
		color #999
.page_main
	padding 0rpx 30rpx
	box-sizing border-box
	.hint_panel
		background #F4F4F4
		border-radius 16rpx
		padding 45rpx 0rpx
		box-sizing border-box
		text-align center
		margin-bottom 30rpx
		.title
			font-size 30rpx
			font-family PingFang SC
			font-weight 400
			color #333333
		.hint
			margin-top 20rpx
			font-size 30rpx
			font-family PingFang SC
			font-weight 400
			color #FB7B22
.select_panel
	box-sizing border-box
	display flex
	align-items center
	justify-content flex-end
	flex-wrap wrap
	.item
		font-size 28rpx
		font-family PingFang SC
		font-weight 400
		color #666666
		background #ECECEC
		padding 8rpx 35rpx
		box-sizing border-box
		margin-right 40rpx
		border-radius 10rpx
		&:last-child
			margin-right 0rpx
	.active
		color #FFFFFF
		background-color rgba(251, 123, 34, 1)
.page_btn
	width 92%
	height 90rpx!important
	
	
.org
	text-align center
	margin-top 70rpx
	font-size 28rpx
	font-family PingFang SC
	font-weight 400
	color #333333
.nursing-icon
	font-size 20rpx
</style>
<style >
	.page{
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-bottom: 100rpx;
	}
	.box{
		padding: 120rpx 30rpx;
		box-sizing: border-box;
	}
	.hangsex {
		display: flex;
		justify-content: space-between;
	}
	
	.sex1 {
		display: inline-block;
		margin-left: 50rpx;
		text-align: center;
		font-family: PingFang SC;
		font-size: 28rpx;
		font-weight: 400;
		border-radius: 10rpx;
		color: #000000;
		line-height: 50rpx;
		width: 100rpx;
		height: 50rpx;
		background-color: #F0F0F0;
	}
	
	.seleced {
		background-color: rgba(251, 123, 34, 1);
		color: #FFFFFF;
	}
	.pickerh {
		display: flex;
		justify-content: space-between;
	}	
	.hang {
		line-height: 100rpx;
		min-height: 100rpx;
		width: 690rpx;
		margin: 10 auto 10rpx;
		display: flex;		
	}
	
	.hang>text {
		line-height: 100rpx;
		min-height: 100rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333;
		white-space: nowrap;
		width: 25%;
	}
	
	.hang>input {
		height: 100rpx;
		line-height: 100rpx;
		width: 75%;
		font-family:"宋体";
		font-size: 24rpx;
		font-weight: 200;
		text-align: right;
		color: #888888;
	}
</style>
